…という経験をしたので記事にしてみました。

原因が分かってしまえば一瞬で治るのですが、原因が分からないと結構引っかかる問題だったりします。
ちなみに私は今回の問題で1時間程悩みました！ …泣けます。

あまりにも悔しかったので、クイズっぽい感じの記事にして過去の自分に届けます（？）

あれ？XAMPP環境で動作確認したシステムがXserverにアップロードしたら動かない…？

とあるページをXAMPP環境で編集して動作確認をしていました。
実装のイメージとしては、下記のようにphpファイルとcssファイルを用意して同じディレクトリに格納しました。

■phpファイル

■cssファイル

■ディレクトリ構成

上記の構成でローカルのULRにアクセスすると下記のような表示になります。

スタイルシートも反映されていて想定通りの表示になりました。

作成が完了したので、早速Xserverにアップロードしてページにアクセスしてみます。
すると…

変化が少ないので分かりづらいですが、CSSファイルが反映されていません。

「おかしいな？」と思ってファイルのエラー内容を見てみると…。

「i-sp-style.css」が読み込まれていないらしい…。

アップロードの失敗を疑いましたが、しっかりとサーバーにアップロードできていました。（※10回ほど上書きしてアップロードしました。）

ではCSSの読み込みの記述が間違っているのか？　再度確認してみましたが…。

パスも間違っていない…。
そもそもXAMPPで確認ができているので、アップロードの失敗以外で読み込みエラーになるのはおかしい…。

どういうことなの…？

…というバグに遭遇して、1時間も悩みました…(´;ω;｀)

どうでしょうか、皆さんはこのバグの修正方法がわかりましたか？

早速、答えを見てみましょう！

バグの原因は「ファイルの大文字と小文字の違い」にありました

先程のディレクトリ構成をよく見てみるとcssのファイル名の頭文字が大文字になっています。

これがスタイルシートが読み込めない原因となっていました。

ですが少し待ってください。XAMPP環境では問題なくスタイルシートは読めていました。
何故ローカル環境とXserverの環境で表示が変わってしまったのでしょうか？

これはサーバーを構成するOS（※WindowsやLinuxの違い）によって、ファイル名の大文字/小文字を区別するかしないかの違いにありました。

参考記事：大文字／小文字の問題とマルチ・プラットフォームの開発 | 東陽テクニカ | “はかる”技術で未来を創る | ソフトウェア 開発支援

　

私のXAMPP環境はWindowsサーバーなので、ファイルの大文字と小文字を区別しません。一方で、XserverはLinuxサーバーなので、大文字と小文字を区別しています。
このように、今回のバグはサーバーのOSの違いによって発生していたため、原因を突き止めるのに時間がかかってしまいました。

サーバーを構築したことのある方なら「こんなもの当然でしょ？」となるのですが、知識が浅いとこんな些細な問題に気づくのも一苦労でした…。

「もっとサーバーの勉強をしなさい！」というサーバーからのメッセージを受け取った気がします( ;∀;)

日々精進です！ではまた！